<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{margin: 0px; padding: 0px;}
			div{
				width: 100px;
				height: 100px;
				float: left;
			}
			.a{
				background: orange;
				/* 设置元素之间的距离 */
				/* 外边距，可以接四个值 */
				/* 1个值：控制的四边
					 2个值：第一个值控制上下，第二个控制左右
					 3个值：第一个控制上 第二个控制左右  第三个下
					 4个值：从上开始，顺时针设置
				 */
				/* margin: 20px 40px 60px 80px; */
				/* 单独设置某一边 top left right bottom*/
				/* margin-left: 40px; */
			}
			.b{
				background: yellowgreen;
				/* 内边距 */
				/* 内容位置  大小 */
				/* 如果设置了大小，会在此大小上加上设置的值 */
				/* 内容受影响，背景不受影响 */
				/* 值的用法 同 外边距 */
				/* padding: 20px; */
				/* 单独设置某一边 top left right bottom*/
				padding-right: 40px;
				
			}
			.c{background: pink;}
			.d{background: blue;}
			.e{background: gray; width: 1300px;}
		</style>
	</head>
	<body>
		<div class="a">a</div>
		<div class="b">b</div>
		<div class="c">c</div>
		<div class="d">d</div>
		<div class="e">e</div>
	</body>
</html>